﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormQuery.aspx.cs" Inherits="BugSysSolution.HTML5Info.FormQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div tag="tag">
        querySelector 和 querySelectorAll 表单选择器 和JQ的类似，HTML5里面集成了这个功能。<br />
        querySelector --->匹配第一个找到的元素
        querySelectorAll --->匹配所有找到的元素
    </div><br />
    <div tag="tag">
        其实我原来不是粗体的,被强迫改成了粗体
    </div><br />
    <div tag="tag">
    比如:
    document.querySelector("div.test>p:first-child"); <br />
    document.querySelectorAll("div.test>p:first-child")[0];<br />
    querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。<br />
    querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空<br />
    </div>
        <input type="button" value="Bold" id="btn1" />
    </form>
</body>
</html>
<script type="text/javascript">
    /*
        和jq的写法大部分一样
        找到tag=tag的div 并change style.
    */
    document.getElementById("btn1").onclick = function () {
        var test = document.querySelectorAll("div[tag=tag]");
        for (var i = 0; i < test.length; i++) {
            test[i].style.fontWeight = "bold";
        }
    }
</script>